<template>

   <div class="form">
       <form
           novalidate
           class="bg-gray-200 mt-10 border-gray-500 py-10 border-2 text-center border-dashed flex items-center justify-center relative "
           enctype="multipart/form-data"
           :class="{
            'border-gray-600' : dragging
           }"
           @dragover.prevent="dragOverHandle"
           @dragleave.prevent="dragLeaveHandle"
       >
           <input
               type="file"
               multiple
               class="absolute opacity-0 w-full h-full top-0 left-0 cursor-pointer"
               @change="selectFileHandle"
           >
           <template v-if="dragging">
                已选 {{ draggingCount}} 个文件.
           </template>
            <template v-else >
                 <div class="text-gray-500">拖动文件上传 或者 <span class="text-blue-500 ">选择文件</span></div>
            </template>
       </form>

   </div>
</template>

<script>
    export default{
        data(){
            return {
                dragging: false,
                draggingCount:0
            }
        },
        computed:{
        },
        methods:{
            selectFileHandle(e){
                this.$emit('selectFile', e.target.files)
            },
            dragOverHandle(e){
                this.dragging = true
                this.draggingCount = e.dataTransfer.items.length;
            },
            dragLeaveHandle(e){
                this.dragging = false
                this.draggingCount = 0;
            }
        }
    }
</script>
